<template>
	<view class="box">
		<view class="apply" @click="apply">申请评估</view>
		<view id="screenshot">
			<view class="title">生活方式动态分析评估报告</view>
			<view class="scope">
				<view class="bgImage">
					<text>53</text>
					<text>一般</text>
				</view>
				<view class="decode">
					您本次生活方式评估得分为<text>53</text>分，属于一般水平，比上次差水平的47分进步了6分，希望继续努力，争取达到良好水平。
				</view>
			</view>
			<table>
				<tr>
					<th></th>
					<th>2019年9月得分</th>
					<th>2019年10月得分</th>
					<th>参考值范围</th>
					<th>动态</th>
				</tr>
				<tr>
					<td>盐摄入g/天</td>
					<td>较咸（9-10g）</td>
					<td>较咸（9-10g）</td>
					<td><6</td>
					<td></td>
				</tr>
				<tr>
					<td>谷薯类摄入g/天</td>
					<td>＞6碗</td>
					<td>＞6碗</td>
					<td>200-400</td>
					<td>进步</td>
				</tr>
				<tr>
					<td>盐摄入g/天</td>
					<td>较咸（9-10g）</td>
					<td>较咸（9-10g）</td>
					<td><6</td>
					<td></td>
				</tr>
				<tr>
					<td>谷薯类摄入g/天</td>
					<td>＞6碗</td>
					<td>＞6碗</td>
					<td>200-400</td>
					<td>进步</td>
				</tr>
				<tr>
					<td>盐摄入g/天</td>
					<td>较咸（9-10g）</td>
					<td>较咸（9-10g）</td>
					<td><6</td>
					<td></td>
				</tr>
				<tr>
					<td>谷薯类摄入g/天</td>
					<td>＞6碗</td>
					<td>＞6碗</td>
					<td>200-400</td>
					<td>进步</td>
				</tr>
				<tr>
					<td>盐摄入g/天</td>
					<td>较咸（9-10g）</td>
					<td>较咸（9-10g）</td>
					<td><6</td>
					<td></td>
				</tr>
				<tr>
					<td>谷薯类摄入g/天</td>
					<td>＞6碗</td>
					<td>＞6碗</td>
					<td>200-400</td>
					<td>进步</td>
				</tr>
				<tr>
					<td>盐摄入g/天</td>
					<td>较咸（9-10g）</td>
					<td>较咸（9-10g）</td>
					<td><6</td>
					<td></td>
				</tr>
				<tr>
					<td>谷薯类摄入g/天</td>
					<td>＞6碗</td>
					<td>＞6碗</td>
					<td>200-400</td>
					<td>进步</td>
				</tr>
				<tr>
					<td>盐摄入g/天</td>
					<td>较咸（9-10g）</td>
					<td>较咸（9-10g）</td>
					<td><6</td>
					<td></td>
				</tr>
				<tr>
					<td>谷薯类摄入g/天</td>
					<td>＞6碗</td>
					<td>＞6碗</td>
					<td>200-400</td>
					<td>进步</td>
				</tr>
				<tr>
					<td>盐摄入g/天</td>
					<td>较咸（9-10g）</td>
					<td>较咸（9-10g）</td>
					<td><6</td>
					<td></td>
				</tr>
				<tr>
					<td>谷薯类摄入g/天</td>
					<td>＞6碗</td>
					<td>＞6碗</td>
					<td>200-400</td>
					<td>进步</td>
				</tr>
				<tr>
					<td>盐摄入g/天</td>
					<td>较咸（9-10g）</td>
					<td>较咸（9-10g）</td>
					<td><6</td>
					<td></td>
				</tr>
				<tr>
					<td>谷薯类摄入g/天</td>
					<td>＞6碗</td>
					<td>＞6碗</td>
					<td>200-400</td>
					<td>进步</td>
				</tr>
				<tr>
					<td>盐摄入g/天</td>
					<td>较咸（9-10g）</td>
					<td>较咸（9-10g）</td>
					<td><6</td>
					<td></td>
				</tr>
				<tr>
					<td>谷薯类摄入g/天</td>
					<td>＞6碗</td>
					<td>＞6碗</td>
					<td>200-400</td>
					<td>进步</td>
				</tr>
				<tr>
					<td>盐摄入g/天</td>
					<td>较咸（9-10g）</td>
					<td>较咸（9-10g）</td>
					<td><6</td>
					<td></td>
				</tr>
				<tr>
					<td>谷薯类摄入g/天</td>
					<td>＞6碗</td>
					<td>＞6碗</td>
					<td>200-400</td>
					<td>进步</td>
				</tr>
			</table>
	
		</view>
		
		<image :src="base64"></image>
	</view>
</template>

<script>
	import html2canvas from 'html2canvas'
	export default {
		data() {
			return {
				base64: ''
			}
		},

		methods:{
			toImg(dom) {
				var dom = dom // 获取dom元素
				return new Promise((resolve,reject)=>{
					// 使页面滑到顶部，避免顶部出现白边
					// uni.pageScrollTo({
					// 	scrollTop: 0,
					// 	duration: 0
					// })
					html2canvas(dom, {
						width: dom.clientWidth, //dom 原始宽度
						height: dom.clientHeight,
						scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
						scrollX: 0,
						useCORS: true, //支持跨域，但好像没什么用
					}).then((canvas) => {
						// 将生产的canvas转为base64图片
						if(dom.attributes[1].nodeValue == 'screenshot'){
							this.base64 = canvas.toDataURL('image/png')
						}
						resolve(true)
					});
				})
			},
			//申请评估
			apply() {
				const _this = this;
				_this.toImg(document.querySelector('#screenshot')).then((a)=>{
					var arr = _this.base64.split(',')
					var mime = arr[0].match(/:(.*?);/)[1]
					var bstr = atob(arr[1]) 
					var nn = bstr.length 
					var u8arr = new Uint8Array(nn);
					while(nn--){
						u8arr[nn] = bstr.charCodeAt(nn);
					}
					var obj1 = new Blob([u8arr], {type:mime});
					_this.$api.testPdf({fileOne:obj1}).then((res) => {
						console.log(res)
					})
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 1032px;
		height: 1566px;
		margin: 0 auto;
		.title {
			color: #00B25C;
			font-size: 48px;
			font-weight: bold;
			margin-top: 54px;
		}
		.scope {	
			position: relative;
			height: 250px;
			margin: 87px auto 0;
			.bgImage {		
				position: absolute;
				left: 0;
				top: 0;
				z-index: 10;
				background: url(../../../static/img/quickly/unscramble.png) no-repeat;
				background-size: 100% 100%;
				width:276px;
				height: 231px;	
				text:nth-child(1) {
					position: absolute;
					top: 50%;
					left: 90px;
					transform: translateY(-50%);
					color: #FFFFFF;
					font-size: 96px;
					font-weight: bold;
				}
				text:nth-child(2) {
					position: absolute;
					top:174px;
					left: 100px;
					color: #FFFFFF;
					font-size: 36px;
				}
			}
			.decode {
				position: absolute;
				top: 120px;
				transform: translateY(-50%);
				left: 130px;
				height: 150px;
				background-color: #ECFFF1;
				margin: auto;
				border-radius: 55px;
				color: #333333;
				font-size: 24px;
				line-height: 42px;
				padding: 24px 48px 24px 150px;
				box-sizing: border-box;
				text {
					color: #00C481;
				}
			}
			
		}
		table {			
			margin: 100px 0 0;
			width: 100%;
			tr {
				text-align: center;	
				display: flex;
				width: 100%;
				th{
					background-color: #00C481;
					min-height: 80px;
					flex: 2;
					color: #FFFFFF;
					margin-right: 1px;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius:5px 5px 0 0;
					color: #FFFFFF;
					font-size: 26px;
					font-weight: 500;
				}
				th:last-child,
				td:last-child{
					flex: 1;
				}
				
				td {
					flex: 2;
					color: #00C481;
					font-size: 22px;
					min-height: 60px;
					margin-right: 1px;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				
			}
			
			tr:nth-child(even) td {
				background-color: #FFFFFF;
			}
			
			tr:nth-child(odd) td {
				background-color: #E2FBEF;
			}
	
			.first {
				min-width: 154px;			
			}
			.second {
				min-width: 138px;
			}
			text:last-child {
				margin-right: 0;
			}
		}
		
		.apply {
			margin: 60px auto;
			background-color: #00C481;
			color: #FFFFFF;
			font-size: 17px;
			width: 140px;
			height: 40px;
			line-height: 40px;
			border-radius: 20px;
			text-align: center;
		}
	}
</style>
